<template>
    <div class="carousel">
      <div class="carousel-inner" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
        <div v-for="(image, index) in images" :key="index" class="carousel-item">
          <img :src="image" alt="轮播图" />
        </div>
      </div>
      <div class="carousel-controls">
        <button @click="prevSlide">Previous</button>
        <button @click="nextSlide">Next</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SimpleCarousel',
    data() {
      return {
        images: [
          '/images/5002.png', // 这里需要替换为实际的图片路径
          '/images/5003.png',
          '/images/5004.png',
          '/images/5005.png', // 这里需要替换为实际的图片路径
          '/images/50023.png',
          '/images/50021.png'
        ],
        currentIndex: 0
      };
    },
    methods: {
      prevSlide() {
        if (this.currentIndex > 0) {
          this.currentIndex--;
        } else {
          this.currentIndex = this.images.length - 1;
        }
      },
      nextSlide() {
        if (this.currentIndex < this.images.length - 1) {
          this.currentIndex++;
        } else {
          this.currentIndex = 0;
        }
      }
    }
  };
  </script>
  
  <style scoped>
  .carousel {
    position: relative;
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-item {
    flex: 0 0 100%;
  }
  
  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .carousel-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }
  
  .carousel-controls button {
    padding: 10px 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  </style>